<template>
  <div>
    <div
      class="flex items-center cursor-pointer"
      @click="$router.push('/wallet/userBalance')"
    >
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <p class="pl-5" to="">{{ $t("用户明细") }}</p>
    </div>
    <el-card class="mt-4">
      <div class="flex flex-col items-start justify-start">
        <div class="flex items-start flex-1">
          <div class="text-xl text-[#7F7F7F]">
            {{ $t("用户ID") }}
          </div>
          <div class="ml-10 text-xl">
            11111
            <!-- {{ numberToCurrencyNo(walletData.total) }} -->
          </div>
        </div>
        <div class="w-full flex items-start justify-between mt-4">
          <div class="flex items-start flex-1">
            <div class="text-xl text-[#7F7F7F]">
              {{ $t("可用数量") }}
            </div>
            <div class="ml-10 text-xl">
              11111
              <!-- {{ numberToCurrencyNo(walletData.total) }} -->
            </div>
          </div>
          <div class="flex items-start flex-1">
            <div class="text-xl text-[#7F7F7F]">
              {{ $t("接收数量") }}
            </div>
            <div class="ml-10 text-xl">
              11111
              <!-- {{ numberToCurrencyNo(walletData.total) }} -->
            </div>
          </div>
        </div>
        <div class="w-full flex items-start justify-between mt-4">
          <div class="flex items-start flex-1">
            <div class="text-xl text-[#7F7F7F]">
              {{ $t("冻结数量") }}
            </div>
            <div class="ml-10 text-xl">
              11111
              <!-- {{ numberToCurrencyNo(walletData.total) }} -->
            </div>
          </div>
          <div class="flex items-start flex-1">
            <div class="text-xl text-[#7F7F7F]">
              {{ $t("发送-数量") }}
            </div>
            <div class="ml-10 text-xl">
              11111
              <!-- {{ numberToCurrencyNo(walletData.total) }} -->
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-tabs v-model="activeName" class="demo-tabs mt-4">
      <el-tab-pane :label="$t('交易订单')" name="first">
        <div class="filterRow">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-input
                v-model="formData.bill_no"
                class="my-2"
                :placeholder="$t('订单号搜索')"
                clearable
                style="width: 100%"
              />
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="5" :xl="4">
              <el-date-picker
                class="my-2"
                style="max-width: 100%; min-width: 160px"
                v-model="formData.time"
                type="daterange"
                range-separator="-"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
                clearable
              />
            </el-col>
            <el-col :span="3" :xl="2">
              <el-select
                class="my-2"
                v-model="formData.coin_name"
                :placeholder="$t('币种')"
                clearable
              >
                <el-option
                  v-for="item in coins"
                  :key="item.coin_name"
                  :label="item.coin_name"
                  :value="item.coin_name"
                />
              </el-select>
            </el-col>
            <el-col :span="3" :xl="2">
              <el-select
                class="my-2"
                v-model="formData.status"
                :placeholder="$t('订单状态')"
                clearable
              >
                <el-option
                  v-for="item in status"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                />
              </el-select>
            </el-col>
            <el-col :span="3" :xl="2">
              <el-select
                class="my-2"
                v-model="formData.status"
                :placeholder="$t('订单状态')"
                clearable
              >
                <el-option
                  v-for="item in status"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                />
              </el-select>
            </el-col>
            <el-col :span="3" :xl="2">
              <el-select
                class="my-2"
                v-model="formData.orderTypes"
                :placeholder="$t('订单类型')"
                clearable
              >
                <el-option
                  v-for="item in orderTypes"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="3" :xl="2">
              <el-select
                class="my-2"
                v-model="formData.orderTypes"
                :placeholder="$t('商户审核')"
                clearable
              >
                <el-option
                  v-for="item in orderTypes"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="3" :xl="2">
              <el-select
                class="my-2"
                v-model="formData.orderTypes"
                :placeholder="$t('平台审核')"
                clearable
              >
                <el-option
                  v-for="item in orderTypes"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
        <el-table :data="walletOrderList" v-loading="loading">
          <el-table-column
            prop="bill_no"
            :label="$t('订单号')"
            align="center"
            width="250"
          />
          <el-table-column align="center" :label="$t('订单状态')">
            <template #default="scope">
              <el-tag
                class="ml-2"
                :type="getCurrentStatus(scope.row.status).type"
                >{{ getCurrentStatus(scope.row.status).name }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="create_time"
            :label="$t('时间')"
            width="200"
          >
            <template #default="scope">
              {{
                dayjs(scope.row.create_time * 1000).format(
                  "YYYY-MM-DD HH:mm:ss"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="trade_type"
            :label="$t('订单类型')"
          />
          <el-table-column
            align="center"
            prop="coin_name"
            :label="$t('币种')"
          />
          <el-table-column align="center" prop="amount" :label="$t('数量')" />
          <el-table-column align="center" :label="$t('商户审核')">
            <template #default="scope">
              <el-tag
                class="ml-2"
                :type="getCurrentStatus(scope.row.status).type"
                >{{ getCurrentStatus(scope.row.status).name }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('平台审核')">
            <template #default="scope">
              <el-tag
                class="ml-2"
                :type="getCurrentStatus(scope.row.status).type"
                >{{ getCurrentStatus(scope.row.status).name }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            :label="$t('操作')"
            width="150"
          >
            <template #default="scope">
              <el-button
                round
                icon="MoreFilled"
                class="cursor-pointer"
                @click="showCurrentDetail(scope)"
                >{{ $t("查看") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <recordDetail
          v-if="currentBillNo"
          :show="isShowOrderDetail"
          :bill_no="currentBillNo"
          from="records"
          @close="clearBillNo"
        />
      </el-tab-pane>
      <el-tab-pane :label="$t('钱包流水')" name="second">
        <el-table :data="recordList" v-loading="loading">
          <el-table-column
            prop="bill_no"
            :label="$t('时间')"
            align="center"
            width="250"
          />
          <el-table-column align="center" prop="amount" :label="$t('类型')" />
          <el-table-column align="center" prop="amount" :label="$t('币种')" />
          <el-table-column align="center" prop="amount" :label="$t('数量')" />
          <el-table-column
            align="center"
            prop="amount"
            :label="$t('交易后数量')"
          />
          <el-table-column
            align="center"
            prop="amount"
            :label="$t('冻结后数量')"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, reactive, computed, watch } from "vue";
import {
  getWalletBillsPageNewApi,
  getWalletHomeNewApi,
} from "@/api/wallet/index";
import { numberToCurrencyNo } from "@/utils/utils";
import recordDetail from "./recordDetail.vue";
import { dayjs } from "element-plus";
const activeName = ref("first");
const loading = ref(false);
const walletOrderList = reactive([
  {
    id: 1,
    coin_name: "BTC",
    amount: 0.0001,
    trade_type: "充值",
    status: 1,
    bill_no: "1",
  },
]);
const recordList = ref([
  {
    id: 1,
    coin_name: "BTC",
    amount: 0.0001,
    trade_type: "充值",
    status: 1,
    bill_no: "1",
  },
]);

const orderTypes = ref([]);
const coins = ref([]);
let query = reactive({
  page: 1,
  pagesize: 10,
});
const formData = reactive({
  coin_name: "",
  bill_no: "",
  time: "",
  orderTypes: "",
  status: "",
});
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const getCoins = async () => {
  //获取币种列表
  const { coins_list } = await getWalletHomeNewApi();
  coins.value = coins_list;
};
getCoins();
const getWalletBills = async () => {
  try {
    loading.value = true;
    const { page, list, extra } = await getWalletBillsPageNewApi(query);
    walletOrderList.value = list;
    pageable.total = page.total_count;
    totalCount.value = page.total_count;
    orderTypes.value = extra.trade_type_map;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
const handleCurrentChange = async (number) => {
  query.page = number;
  await getWalletBills();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getWalletBills();
};
getWalletBills();

const status = ref([
  { key: 0, name: "处理中", type: "" },
  { key: 1, name: "成功", type: "success" },
  { key: 2, name: "失败", type: "danger" },
]);
const getCurrentStatus = (value) => {
  return status.value.find((item) => item.key === value);
};

//处理筛选的参数
const filterQuery = computed(() => {
  return {
    coin_name: formData.coin_name,
    bill_no: formData.bill_no,
    start:
      formData.time && formData.time[0]
        ? timestamp(formData.time[0].valueOf())
        : "",
    end:
      formData.time && formData.time[1]
        ? timestamp(formData.time[1].valueOf())
        : "",
    trade_type: formData.orderTypes,
    status: formData.status,
  };
});

const searchData = () => {
  console.log(formData, filterQuery.value);
  query = { ...query, ...filterQuery.value };
  query = Object.fromEntries(
    Object.entries(query).filter(([key, value]) => {
      // 过滤空值
      return value !== "" && value !== null && value !== undefined;
    })
  );
  query.page = 1;
  getWalletBills();
};

const isShowOrderDetail = ref(false);
const currentBillNo = ref(null);
const showCurrentDetail = (scope) => {
  currentBillNo.value = scope.row.bill_no;
};
const clearBillNo = () => {
  currentBillNo.value = "";
};
watch(
  () => currentBillNo.value,
  (newVal) => {
    console.log(newVal, "newVal");
    if (newVal) {
      isShowOrderDetail.value = true;
    } else {
      isShowOrderDetail.value = false;
    }
  }
);
</script>
